<template>
  <div class="brand-street">
    <img @click="tiaohuzna(banner.url)" class="banner" :src="banner.image" />
    <!-- <ul class="header">
      <li :class="{color:select == index}" v-for="(list, index) in header" :key="index" @click="click_list($event,index)">{{list.name}}</li>
    </ul> -->
    <div class="header">
      <van-tabs v-model="active" line-width="20px" line-height="3px" color="#06A255">
        <van-tab   v-for="(list, index) in header" :key="index" 
        :title="list.cat_name">
          <!-- 内容 {{ index }} -->
        </van-tab>
      </van-tabs>
    </div>
    <div class="gray"></div>
    <div class="box">
      <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <div class="item12">
              <div class="item" @click="gopinpaidetails(item.brand_id)" v-for="(item,index) in zhuanqu" :key="index">
                <img :src="item.brand_logo" />
                <p>{{item.brand_name}}</p>
              </div>
            </div>
          
        
      </van-list>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        banner:'',
        zhuanqu:'',
        header:[],
        active:'',
        cat_id:'',
        // 分页
        loading: false,
        finished: false,
        page:1
      }
    },
    created() {
      this.getbanner()
      this.getfenlei()
    },
    mounted(){
      // this.pinpai()
    },
    methods: {
      // 获取banner
      getbanner(){
        this.$get("api/gzh_order.php?action=exchange_ad", {
          id:16
        }).then(res => { 
          this.banner = res.data[0]?res.data[0]:''
        }).catch(err => {

        });
      },
      // banner跳转
      tiaohuzna(url){
        window.location.href = url
      },
      // 分类
      getfenlei(){
        this.$get("api/gzh_index.php?action=goods_type", {

        }).then(res => { 
          this.header = res.data
        }).catch(err => {

        });
      },
      onLoad() {
        setTimeout(() => {
          this.page+=1
          this.pinpai(this.page)
        }, 500);
      },
      // 品牌专区
      pinpai(page){
        this.$get("api/gzh_index.php?action=brand_list", {
          cid:this.cat_id,
          page:page,
          limit:20
        }).then(res => { 
          
          this.loading=false
          if(page==1){
              if(res.data.length==0){
                  this.finished=true
              }else{
                  this.zhuanqu = res.data
              }
              if(res.data.length>0&&res.data.length<20){
                  this.finished=true
                  // this.page = 1
              }
              
          }else{
              if(res.data.length==0){
                  this.finished=true
              }else{
                  for (const key in res.data) {
                      this.zhuanqu.push(res.data[key])
                  }
              }
              if(res.data.length>0&&res.data.length<20){
                  this.finished=true
                  // this.page = 1
              }
              
          }
        }).catch(err => {

        });
      },
      // 品牌详情
      gopinpaidetails(id){
        var uid = localStorage.getItem('uid')
        if (!uid) {
            // console.log(window.location.href)
            // console.log(this.$route.name)
            this.$router.replace({ name: 'login', params: { 'beforeurl': this.$route.name } })
        } else {
            console.log('已经登录')
            this.$router.push({name:'brand-street-details',query: {brand_id:id}})
        }
        
      },
      
    },
    watch: {
      active(val){
        this.zhuanqu = [];
        this.page = 1;
        this.loading = false;//下拉加载中
        this.finished = false;//下拉结束
        if(this.loading){
            this.onLoad();
        }
        for(var a in this.header){
          if(val == a){
            this.cat_id = this.header[a].cat_id
          }
        }
        this.pinpai(1)
      }
    }
  }
</script>

<style scoped>
.brand-street{
  width: 100%;
  height: 100%;
}
.brand-street .banner{
  width:100%;
  height:296px;
  background: #ccc;
  display: block;
}
.tabs{
  width: 100%;
  position: relative;
  box-sizing:border-box;
  overflow:hidden;
  white-space: nowrap;
  height:103px;
  font-size:32px;
}
.header{
  width: 100%;
  height: 87px;
}
.gray{
  width: 100%;
  height: 4px;
  background: #F6F6F6;
}
.box{
  width:100%;
  height: calc(100% - 403px);

  margin-top: 10px;
  padding: 0 30px;
  box-sizing: border-box;
}
.bob{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  
}
.item{
  width: 33.33%;
  text-align: center;
  margin-top: 10px;
}
.item img{
  
  width: 216px;
  height: 126px;
  min-height: 126px; 
  border: 1PX solid #f7f7f7;
}
.item p{
  font-size: 30px;
  color: #333;
}
.item12{
  display: flex;
  width: 100%;
  /* height: 100%; */
  /* align-items: center; */
  align-content: flex-start;

  /* justify-content: space-between; */
  flex-wrap: wrap;
}
</style>
<style>
.van-tabs__line{
  bottom: 1PX !important;
}
.van-tab{
  font-size: 28px !important;
  line-height: 1.12rem!important;
}
/* .van-tab__text, .van-tabs{
  font-size: 28px !important;
} */
[class*=van-hairline]::after {
  border:none
}
.van-list{
    height:70vh;
    width: 100%;
    overflow: hidden;
  overflow-y: scroll;
}
.van-tabs--line .van-tabs__wrap{
  height: auto!important;
}
.van-list__error-text, .van-list__finished-text, .van-list__loading, .van-pull-refresh__head{
  font-size: 28px !important;
}
.van-ellipsis{
  overflow: visible !important;
}
</style>